<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>BLOG</title>
  <!-- Demo styles -->
  <style>


  </style>
  <script src="../font_ico/iconfont.js"></script>
  <!-- 引用bootstrap核心css -->
  <link rel="stylesheet" href="../css/bootstrap.min.css">

  <!-- 引用动画库 -->
  <link rel="stylesheet" href="../css/animate.min.css">

  <!-- 引用重置样式表 -->
  <link rel="stylesheet/less" href="../css/reset.less">

  <!-- 引用公共样式 -->
  <link rel="stylesheet/less" href="../css/common.less">

  <!-- 引用该页面样式 -->
  <link rel="stylesheet/less" href="../css/blog.less">
  <link rel="stylesheet" href="../css/swiper-bundle.min.css">

</head>

<body>
<div class="warp">
  <div class="nav-mtop">
    <div>
      <div class="nav-mtop-l">
        <div><img src="" alt=""><span>Call Us: (0) 123 456 789</span></div>
        <div><img src="" alt=""><span>jetspace@mail.com</span></div>
      </div>
      <div class="nav-mtop-r">
        <img src="../images/gq1024.png" alt="">

        <select>
          <option>中国</option>
        </select>
      </div>
    </div>

  </div>
  <header class="header" id="header">
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- 移动端的导航按钮 -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- logo -->
          <a class="navbar-brand wow fadeInLeft" href="../index.html"><img src="../images/logo.png"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <!-- 导航栏 -->
          <ul class="nav navbar-nav navbar-right">
            <!-- HOME          About          SERVICES          portfolio        -->
            <li><a href="../index.html" class="wow fadeInRight" data-wow-delay="100ms">HOME</a></li>
            <li><a href="./about.html" class="wow fadeInRight" data-wow-delay="200ms">About</a></li>
            <li><a href="./servers.html" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
            <li><a href="./blog.html" class="wow fadeInRight" data-wow-delay="300ms">BLOG</a></li>
            <li><a href="./contact.html" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
            <li>
              <div><input type="text" placeholder="Search"> <img src="../images/ssIcon.png" alt=""></div>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>
  <div class="mid-title">
    <div class="tips">
      <p class="p1">Our Blog</p>
      <p class="p2">Vivamus magna justo, lacinia eget consectetur sed, convallis at
      </p>
    </div>

    <img src="../images/Clouds3.png" alt="">
  </div>

  
  <div class="blog-list">
    <div class="blog-list-l">
      <div>
        <div class="b-l-l-t">
          <img src="../images/20.PNG" alt="">
        </div>
        <h1>Our awesome title for blog</h1>
        <div class="b-l-l-m">
          <div>
            <div>
              <img src="../images/Calendar%20Icon.png" alt="">
              <span>23 September 2013</span>
            </div>
            <div>
              <img src="../images/Autor%20Icon.png" alt="">
              <span>By: John Doe</span></div>
          </div>
          <div>
            <img src="../images/Bubble%20Icon.png" alt="">
            <span>
            7 Comments
          </span>
          </div>
        </div>
        <div class="b-l-l-b">
          Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum
        </div>
        <a href="">Read More</a>
      </div>
      <div>
        <div class="b-l-l-t">
          <img src="../images/25.PNG" alt="">
        </div>
        <h1>Our awesome title for blog</h1>
        <div class="b-l-l-m">
          <div>
            <div>
              <img src="../images/Calendar%20Icon.png" alt="">
              <span>23 September 2013</span>
            </div>
            <div>
              <img src="../images/Autor%20Icon.png" alt="">
              <span>By: John Doe</span></div>
          </div>
          <div>
            <img src="../images/Bubble%20Icon.png" alt="">
            <span>
            7 Comments
          </span>
          </div>
        </div>
        <div class="b-l-l-b">
          Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum
        </div>
        <a href="">Read More</a>
      </div>
      <div>
        <div class="b-l-l-t">
          <img src="../images/30.PNG" alt="">
        </div>
        <h1>Our awesome title for blog</h1>
        <div class="b-l-l-m">
          <div>
            <div>
              <img src="../images/Calendar%20Icon.png" alt="">
              <span>23 September 2013</span>
            </div>
            <div>
              <img src="../images/Autor%20Icon.png" alt="">
              <span>By: John Doe</span></div>
          </div>
          <div>
            <img src="../images/Bubble%20Icon.png" alt="">
            <span>
            7 Comments
          </span>
          </div>
        </div>
        <div class="b-l-l-b">
          Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum consectetur sed, convallis at tellus.
          Donec sollicitudin molestie malesuada. Donec sollicitudin molue in ipsum
        </div>
        <a href="">Read More</a>
      </div>

    </div>
    <div class="blog-list-r">
      <div>
        <h1>Search Blog</h1>
        <div><input type="text" placeholder="Search"> <img src="../images/ssIcon.png" alt=""></div>
      </div>
      <div>
        <h1>Categories</h1>
        <ul>
          <li>Graphic Design <span>(3)</span></li>
          <li>Video  <span>(7)</span></li>
          <li>Audio  <span>(3)</span></li>
          <li>Video  <span>(7)</span></li>
          <li>Audio  <span>(3)</span></li>
          <li>Business  <span>(9)</span></li>
          <li>Photography  <span>(5)</span></li>
          <li>Web Design   <span>(11)</span></li>
          <li>Media (6)  <span>(6)</span></li>

        </ul>
      </div>
      <div>
        <h1>Archives</h1>
        <ul>
          <li>January<span>(3)</span></li>
          <li>February    <span>(7)</span> </li>
          <li>March    <span>(3)</span> </li>
          <li> April   <span>(9)</span> </li>
          <li> Mayl   <span>(5)</span> </li>
          <li>  June  <span>(11)</span> </li>
          <li>Jully    <span>(15)</span> </li>
          <li>Avgust    <span>(7)</span> </li>
          <li>September   <span>(9) </span> </li>
          <li>October    <span>(5)</span> </li>
          <li> November   <span>(11)</span> </li>
          <li> December   <span>(6)</span> </li>


        </ul>
      </div>
    </div>
  </div>
  <div class="end container-fluid">
    <div class="endlist row">
      <div class="col-lg-3 col-md-6">
        <p class="p1">Menu</p>
        <ul>
          <li>HOME</li>
          <li>SERVICES</li>
          <li>ABOUT US</li>
          <li>BLOG</li>
          <li>CONTACT US</li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">We Offer</p>
        <ul>
          <li>BUSINESS HOSTING</li>
          <li>PRIVATE HOSTING</li>
        </ul>
        <p class="p1">Service</p>
        <ul>
          <li>FIRST SERVICE</li>
          <li>SECOND SERVICE</li>
          <li>FIRST SERVICE</li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">Our Blog</p>
        <p class="p2">Lorem Ipsum sample text</p>
        <p class="p3">Vivamus suscipit tortor eget felis porttitor
          volutpat. Curabitur arcu erat, accumsan id
          imperdiet et, porttitor at sem. Curabitur arcu
          erat, accumsan.
        </p>
        <p class="p4">Read More</p>
      </div>
      <div class="col-lg-3 col-md-6 ">
        <p class="p1">We Are Social</p>
        <img src="../images/Social%20Icons.png" alt="">
      </div>
    </div>
    <img src="../images/Clouds3.png" alt="">
  </div>



</div>
</body>

</html>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/swiper-bundle.min.js"></script>

<script>
  //实例化wow.js
  new WOW().init();


</script>